
<template>
  <div class="book-reader">
    <book-catalog v-show="catalogShow" 
      :bookId="bookId" 
      :bookName="bookDetail.name"
      :totalChapters="bookDetail.totalChapters"
      :chapterOrder="currentChapter.order" 
      @goto-chapter="gotoChapter" 
      @hide-catalogs="hideChapterList"/>
    <div v-if="read" class="book-reader-content">
      <book-header :chapter="currentChapter" @click="showChapterList"></book-header>
      <book-body 
        :id="currentChapter.id" 
        :bookId="bookId" 
        @pre-chapter="preChapter" @next-chapter="nextChapter"></book-body>
    </div>
    <div v-else class="book-reader-cover" @click="clickBookReaderCover">
      <book-detail :detail="bookDetail"></book-detail>
    </div>
    
  </div>
</template>

<script>
import BookHeader from '@/components/book/BookHeader.vue'
import BookBody from '@/components/book/BookBody.vue'
import BookDetail from '@/components/book/BookDetail.vue'
import BookCatalog from '@/components/book/BookCatalog.vue'
import { getBook, getBookChapterDetail } from '@/api/book.js'


export default {
  name: 'BookReader',
  components: {
    BookHeader, BookBody, BookDetail, BookCatalog
  },
  data () {
    return {
      bookId: 0,
      chapterOrder: 0,
      page: 0,
      read: false,
      // 书籍信息
      bookDetail: {
        name: '',
        description: '',
        totalChapters: 0,
        totalWords: 0,
        author: '',
        status: ''
      },
      // 当前章节
      currentChapter: {
        id: 0,
        order: 0,
        title: '',
        totalWords: 0
      },
      // 章节列表
      chapterList: [],
      catalogShow: false
    }
  },
  mounted () {
    // 获取链接的参数
    this.bookId = parseInt(this.$route.params.bookId)
    this.chapterOrder = this.$route.query.chapterOrder

    // 获取书籍信息
    if (this.bookId == 0) {
      alert('缺少书籍 ID 参数')
      return
    }
    getBook(this.bookId).then( (response) => {
      if (response.status == 200) {
        var data = response.data
        this.bookDetail = data
      } else {
        alert(response.statusText)
      }
    })
    // 获取章节概要
    if (!this.chapterOrder) {
      this.read = false
      return
    }
    this.read = true
  },
  watch: {
    chapterOrder(newId, oldId) {
      if ( !newId ) {
        return
      }
      this.$router.push({
        path: '/book-reader/' + this.bookId,
        query: {
          chapterOrder: this.chapterOrder
        }
      })
      getBookChapterDetail(this.bookId, this.chapterOrder).then( (response) => {
        if (response.status == 200) {
          var data = response.data
          this.currentChapter = data
        } else {
          alert(response.statusText)
        }
      })
    }
  },
  methods: {
    clickBookReaderCover(){
      this.read = true
      this.chapterOrder = 1
    },
    preChapter() {
      if ( this.chapterOrder == 1) {
        alert('已经是第一章了')
        return
      } else {
        this.chapterOrder --
      }
    },
    nextChapter() {
      if (this.chapterOrder == this.bookDetail.totalChapters) {
        alert('已经是最后一章了')
        return
      } else {
        this.chapterOrder ++
      }
    },
    gotoChapter( chapterOrder ) {
      this.chapterOrder = chapterOrder
    },
    showChapterList() {
      this.catalogShow = true
    },
    hideChapterList() {
      this.catalogShow = false
    }
  }
}
</script>

<style>
.book-reader {
    width: 100%;
    min-height: 100%;
    background-color: antiquewhite;
}
.book-reader-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}
.book-reader-content{
  width: 100%;
  min-height: 100%;
}
</style>